<script setup lang="ts">
import {
  ElInput,
  ElButton,
  ElIcon,
  ElMenu,
  ElSubMenu,
  ElMenuItem,
  ElDialog,
  ElTooltip,
  ElSelect,
  ElOption,
  ElMessageBox
} from "element-plus";
import { Plus, Search, Delete } from "@element-plus/icons-vue";
import { ref, unref, computed } from "vue";
import { treeFilter } from "@/utils/tree";
import { searchHightlight } from "@/utils/common";
import { useRootData, useCurrentData } from "@/store/processFlow";

const rootData = useRootData();
const currentData = useCurrentData();
const search = ref("");
const list = computed(() => {
  const s = unref(search);
  const d = rootData.slideList;
  searchHightlight("search-hight-text", s);
  if (s) {
    return treeFilter(d, (n) => n.name.indexOf(s) != -1);
  }
  return d;
});

const openSubMenus = computed(() => {
  const s = unref(search);
  const l:any[] = unref(list);
  if(s){
    console.log(l)
    return l.map(d => d.id + '')
  }
  return [];
})
const activeItem = computed<any>(() => {
  return currentData.activeItem;
});

const handleSelect = (item: any, list: any[]) => {
  currentData.resetActiveItem(
    item.data,
    list.map((d) => d.data)
  );
};

const isCollapse = computed(() => {
  return currentData.slideCollapse || false;
});
// 弹框
const dialogVisible = ref(false);
const dialogFromData = ref<any>({})
const flowGroups = computed(() => rootData.slideList.map((d:any) => ({label:d.name,value:d.name})))
const handleSubmit = async () => {
  const data = {...dialogFromData.value}
  const res = await rootData.addSlideFlow(data)
  //
  if(res !== false){
    currentData.resetActiveItem(res,rootData.getItemGroupList(res))
  }

}
const handleOpen = () => {
  dialogFromData.value = {};
  dialogVisible.value = true;
}

const handleDelete = (item:any) => {
  const id= item.id;
  ElMessageBox.confirm(
    '确定要删除该流程？： ['+ item.name +']',
    '删除流程',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await rootData.delSlideFlow(id)
      if(id == currentData.activeItem.id){
        currentData.clearActiveItem();
      }
    })
    .catch(() => {})
}


</script>

<template>
  <div class="slide-list" w-full h-full relative>
    <div
      w-full
      flex
      p-r-12
      box-border
      justify-between
      items-center
      :class="[isCollapse ? 'h-84 flex-col' : 'h-40']"
    >
      <el-input
        v-show="!isCollapse"
        v-model="search"
        class="_search"
        :prefix-icon="Search"
        size="large"
        box-border
        text-16
        clearable
      ></el-input>

      <el-tooltip
        class="box-item"
        placement="right"
        effect="light"
        popper-class="slide-search-popper"
      >
        <el-button
          v-show="isCollapse"
          w-40
          h-40
          box-border
          b-none
          b-0
          text-16
          c="#2B7A4F"
          :icon="Search"
        ></el-button>
        <template #content>
          <el-input v-model="search" box-border clearable></el-input>
        </template>
      </el-tooltip>
      <el-button
        :class="isCollapse ? 'important-m-l-0' : 'm-l-8'"
        w-40
        h-40
        box-border
        b-none
        b-0
        text-16
        c="#2B7A4F"
        :color="isCollapse ? '' : '#2B7A4F14'"
        :icon="Plus" 
        @click="handleOpen"
      ></el-button>
    </div>
    <div class="_list" w-full overflow-auto box-border>
      <el-menu :collapse="isCollapse" :default-active="activeItem?.id" :default-openeds="openSubMenus">
        <el-sub-menu
          v-for="(item,i) in list"
          :key="item.id || item.name"
          :index="item.id + ''"
        >
          <template #title :data-title="item.name">
            <el-icon><i :class="`icon-g-${i % 7 + 1}`"></i></el-icon>
            <span class="search-hight-text" >{{
              item.name
            }}</span>
          </template>
          <el-menu-item
            v-for="cld in item.children || []"
            :key="cld.id || cld.name"
            :index="cld.id + ''"
            w-full
            block
            box-border
            flex
            justify-between
            items-center
            :data-title="cld.name"
            @click="() => handleSelect(cld, item.children)"
            ><span display-none class="_item-name"
              ><i b-r="3px solid #2B7A4F" h-12 absolute top-4 left-0 rd-r-2></i
              >{{ item.name }}</span
            >
            <span
              
              max-w-100
              truncate
              class="_menu-item-name search-hight-text"
              >{{ cld.name }}</span
            >
            <el-icon text-10 @click="() => handleDelete(cld)"><Delete /></el-icon
          ></el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="新增流程" modal-class="slide-dialog-model" :show-close="false" w-480 align-center :close-on-click-modal="false">
    <div p-x-24 bg-white p-t-16 p-b-24>
      <div b="1px solid #B3BEBA80" p-16 rd-16>
        <div text-14>
          <p fw-600 c="#1D3C2B" h-20 lh-20 mb-8>流程分类</p>
          <el-select v-model="dialogFromData.catalog" w-full h-32 filterable allow-create popper-class="ui-select-popper" placeholder="请输入流程分类">
            <el-option v-for="item in flowGroups" :key="item.value" :value="item.value">{{ item.label }}</el-option>
          </el-select>
        </div>
        <div text-14 mt-16>
          <p fw-600 c="#1D3C2B" h-20 lh-20 mb-8>流程分类</p>
          <el-input v-model="dialogFromData.subprocess" w-full h-32 placeholder="请输入子流程名称"></el-input>
        </div>
      </div>
      <div flex justify-end mt-24>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.slide-list {
  --dc: #1d3c2ba6;
  --ac: #1d3c2b;
  &::highlight(search-hight-text) {
    color: #2b7a4f;
    background: #fff;
  }
  ._search {
    width: 152px;
    box-sizing: border-box;
    border: none;
    .el-input__wrapper {
      border-color: transparent;
      padding: 0 12px;
      font-size: 16px;
    }
  }
  ._list {
    height: calc(100% - 40px);
    padding-right: 12px;
    &::-webkit-scrollbar {
      position: absolute;
      width: 4px;
      height: 4px;
    }
    &:hover {
      padding-right: 12px;
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px #2b7a4f22;
        background: #2b7a4f33;
      }
    }

    // > ul {
    //   width: 200px;
    // }
    ._node-children {
    }
    .el-menu {
      border: none;
      .el-sub-menu__title,
      .el-menu-item {
        color: var(--dc);
        &:hover {
          color: var(--ac);
          background-color: #2b7a4f14;
        }
        > .el-icon {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }

      .el-sub-menu {
        margin-top: 4px;
        &.is-opened {
          .el-sub-menu__title {
            color: var(--ac);
          }
        }
        &.is-active {
          .el-sub-menu__title {
            color: var(--mc);
            font-weight: 600;
          }
        }
        .el-sub-menu__title {
          padding-left: 12px !important;
          height: 40px;
          border-radius: 4px;
          line-height: 40px;
        }
      }
      .el-menu-item {
        margin-top: 4px;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;

        
        &:hover{
          color: var(--ac);
          background-color: #2b7a4f14;
          .el-icon{
            opacity: 1;
          }
        }
        &.is-active {
          background: var(--mc);
          color: #fff;
        }
        .el-icon {
          font-size: 10px;
          opacity: 0;
          transition:all .5s;
          &:hover{
            font-size:12px;
          }
        }
      }
      &.el-menu--collapse {
        width: 100%;
        .el-sub-menu {
          &.is-active {
            .el-sub-menu__title {
              color: var(--mc);
              background-color: #2b7a4f14;
              .el-icon {
                color: var(--mc);
              }
            }
          }
          .el-sub-menu__title {
            padding: 0 !important;
            justify-content: center;
            .el-icon {
              margin: 0;
            }
          }
        }
      }
    }
  }
}

.el-menu--popup-container {
  background: #ffffff;
  box-shadow: 0px 8px 40px 0px rgba(29, 60, 43, 0.3);
  border-radius: 8px;
  .el-menu--popup {
    padding: 16px;
    position: relative;
    .el-menu-item {
      height: 40px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 400;
      color: #1d3c2b;
      border-radius: 4px;
      overflow: visible;
      width: 260px;
      font-size: 14px;
      &:hover {
        color: var(--ac);
        background-color: #2b7a4f14;
        .el-icon{
          opacity: 1;
        }
      }
      &.is-active {
        background: #2b7a4f;
        color: #ffffff;
        font-weight: 600;
      }
      &:not(:last-child){
        margin-bottom:4px;
      }
      ._menu-item-name {
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .el-icon {
        font-size: 10px;
        opacity: 0;
        transition:all .5s;
        &:hover{
            font-size:12px;
        }
      }
      &:first-child {
        margin-top: 36px;
        ._item-name {
          position: absolute;
          display: block;
          left: -16px;
          top: -36px;
          height: 20px;
          line-height: 20px;
          padding-left: 12px;
          color: #1d3c2b;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
}

.el-popper.slide-search-popper{
  height:40px;
  background:#2B7A4F14 !important;
  box-shadow: 0px 8px 40px 8px rgba(29,60,43,0.3);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  .el-input{
    height:30px;
    font-size:14px;
    .el-input__wrapper{}
  }
  .el-popper__arrow{
    display:none;
    &::before{
      background:#2B7A4F14 !important;
    }
  }
}

.el-overlay.slide-dialog-model{
  background-color:transparent;
  .el-dialog{
    border-radius: 0;
    background:transparent;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 8px 40px 8px rgba(29,60,43,0.3);
    .el-dialog__header{
      padding:0;
      margin:0;
      height:60px;
      background: #EEF5F1;
      font-size: 20px;
      font-weight: 600;
      color: #1D3C2B;
      display:flex;
      align-items: center;
      justify-content: center;
    }
    .el-dialog__body{
      padding:0;
    }
  }
}
</style>

<style>
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(0, 40px);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>
